<template>
  <div ref="chartContainer" class="chart-container" :style="containerStyle"></div>
</template>
  
  <script>
  import * as echarts from 'echarts'; // 4.9.0版本
  
  export default {
    data() {
      return {
        // 原始数据（单位：㎡）
        rawData: {
          total: [559700, 557100, 466400, 410200, 380600, 347800, 341100, 236100, 236000],
          land: [212000, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        containerStyle: {
          width: '100%',
          height: this.getChartHeight() + 'px'
        },
        resizeHandler: null
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.initBarChart();
        this.resizeHandler = () => {
          this.updateChartHeight();
        };
        window.addEventListener('resize', this.resizeHandler);
      });
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.resizeHandler);
    }, 
    methods: {
      // 获取自适应高度（可根据需要调整比例或最小高度）
      getChartHeight() {
        // 获取父元素高度
        if (this.$refs.chartContainer && this.$refs.chartContainer.parentElement) {
          return this.$refs.chartContainer.parentElement.clientHeight;
        }
        // 兜底
        return 400;
      },
      updateChartHeight() {
        const h = this.getChartHeight();
        this.containerStyle.height = h + 'px';
        // echarts自适应
        if (this.$refs.chartContainer && this.myChart) {
          this.myChart.resize();
        }
      },
      // 转换为万㎡（保留两位小数）
      formatData(value) {
        return (value / 10000).toFixed(2) - 0;
      },
      // 计算房屋数据（总计 - 土地）
      getHouseData() {
        return this.rawData.total.map((total, index) => {
          const land = this.rawData.land[index];
          return this.formatData(total - land);
        });
      },
      initBarChart() {
        const chartDom = this.$refs.chartContainer;
        if (!chartDom) return;

        this.myChart = echarts.init(chartDom);

        // 转换后的数据
        const totalData = this.rawData.total.map(v => this.formatData(v));
        const landData = this.rawData.land.map(v => this.formatData(v));
        const houseData = this.getHouseData();

        const option = {
          title: {
            text: '各公司闲置面积（堆叠显示）',
            left: 'center',
            textStyle: { color: '#fff', fontSize: 18 }
          },
          legend: {
            data: ['土地', '房屋', '总计'], // 图例顺序与堆叠层次对应
            top: 20,
            left: 'center',
            textStyle: { color: '#fff' }
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff',
              formatter: '{value} 万㎡'
            },
            axisLine: { lineStyle: { color: '#666' } },
            splitLine: { lineStyle: { color: '#333' } }
          },
          yAxis: {
            type: 'category',
            data: [
              '北京金融街资产管理有限公司',
              '北京金融街投资集团有限公司',
              '北京天娇世纪投资有限公司',
              '北京华天饮食集团公司',
              '北京天恒置业集团有限公司',
              '北京广安控股有限公司',
              '北京宣武投资有限公司',
              '北京市西城区国有资产经营公司',
              '北京环雅丽都投资有限公司'
            ],
            axisLabel: {
              color: '#fff',
              width: 120,
              formatter: (value) => {
                return value.length > 8 ? value.substring(0, 8) + '...' : value;
              }
            },
            axisLine: { lineStyle: { color: '#666' } }
          },
          series: [
            // 1. 土地（最下层）
            {
              name: '土地',
              type: 'bar',
              stack: 'areaStack', // 绑定到同一堆叠组
              itemStyle: { color: '#6fb27c' }, // 绿色
              data: landData,
              label: { 
                show: true, 
                position: 'insideRight', // 标签显示在堆叠块内部右侧
                color: '#fff' 
              }
            },
            // 2. 房屋（中间层）
            {
              name: '房屋',
              type: 'bar',
              stack: 'areaStack', // 同一堆叠组
              itemStyle: { color: '#72c9e5' }, // 浅蓝色
              data: houseData,
              label: { 
                show: true, 
                position: 'insideRight', 
                color: '#fff' 
              }
            },
            // 3. 总计（最上层，实际是前两者的总和）
            {
              name: '总计',
              type: 'bar',
              stack: 'areaStack', // 同一堆叠组
              itemStyle: { color: '#6b5ddf' }, // 紫色
              data: totalData, // 注意：实际堆叠后总高度=土地+房屋，这里数据仅用于标签显示
              label: { 
                show: true, 
                position: 'right', // 总计标签显示在条形右侧
                color: '#fff',
                fontWeight: 'bold' // 突出显示总计
              }
            }
          ],
          backgroundColor: '#0f243a'
        };

        this.myChart.setOption(option);
        // echarts自适应
        this.myChart.resize();
      }
    }
  };
  </script>